<template>
	<view>
		<view class="vc-item" v-if="type == 10">
			<text class="vc-item-title">{{title}}</text>
			<input class="vc-item-content" v-model="values" :placeholder="'请输入' + title" maxlength="20" />
		</view>
		<view class="vc-item" v-if="type == 40">
			<text class="vc-item-title">{{title}}</text>
			<picker mode="date" @change="bindDateChange" :value="birth_day" class="vc-item-content">
				<view class="uni-input">{{birth_day}}</view>
			</picker>
		</view>
		<view class="vc-item" v-if="type == 30">
			<text class="vc-item-title">{{title}}</text>
			<picker :range="genderList" :value="gender_value" @change="bindGenderChange" class="vc-item-content">
				<view class="uni-input">{{gender_name}}</view>
			</picker>
		</view>
		<view v-if="type == 20">
			<view class="vc-item">
				<text class="vc-item-title">{{title}}</text>
				<input class="vc-item-content" v-model="values" :placeholder="'请输入' + title" maxlength="18" />
			</view>
			<view class="vc-item">
				<button class="code-btn" style="height: 80rpx;" :disabled="isSendCode" :style="{background:isSendCode?'#999':'#f95b4f'}" @click="sendCode">{{codeTest}}</button>
			</view>
			<view class="vc-item">
				<text class="vc-item-title">验证码</text>
				<input class="vc-item-content" v-model="code"  placeholder="请输入验证码" maxlength="6" />
			</view>
		</view>
		<view class="done-btn" @click="saveCustomer()">保存</view>
	</view>
</template>

<script>
	import {
		isLogin,
		toLogin
	} from '@/config/common.js'
	import {saveCustomerInfobykey,sendValidateCode,checkValidateCode} from '@/constant/customer.js'
	export default {
		data() {
			return {
				title: '',
				type: 1,
				key:'',
				values:'',
				birth_day: new Date(),
				gender_value:0,
				gender_name:'',
				genderList: ["女","男"],
				isSendCode: false,
				seconds:60,
				codeTest:'发送验证码',
				customerId:'',
				code:''
			}
		},
		onLoad(info) {
			if (!isLogin()) {
				toLogin();
			}
			this.title = info.title;
			this.type = info.type
			this.key = info.key;
			this.values = info.values;
			if (this.type == 30) {
				this.gender_value = this.values;
				this.gender_name = (this.gender_value == 1 ? '男' : '女');
			}else if(this.type == 40){
				if(this.values){
					this.birth_day = this.values
				}else{
					this.birth_day = new Date();
				}
			}
			this.customerId = uni.getStorageSync("customerId");
		},
		methods: {
			async sendCode() {
				this.isSendCode = true;
				await sendValidateCode({phone:this.values,code:''});
				uni.showToast({
					icon:'none',
					title:'发送成功'
				})
				
				let timer = setInterval(()=>{
					this.seconds--;
					this.codeTest = '重新发送' + this.seconds + 's'
					if (this.seconds == 0) {
						clearInterval(timer)
						this.codeTest = '发送验证码'
						this.isSendCode = false;
						this.seconds = 60;
					}
				},1000)
			},
			bindDateChange(e) {
				this.birth_day = e.target.value;
			},
			bindGenderChange(e) {
				this.gender_value = e.target.value ;
				this.gender_name = (this.gender_value == 1 ? '男' : '女');
			},
			async saveCustomer(){
				switch(this.key){
					case 'NickName':
						await saveCustomerInfobykey({id:this.customerId,key:this.key,vue:this.values});
						uni.setStorageSync("customer_nickname",this.values);
						break;
					case 'UserName':
						await saveCustomerInfobykey({id:this.customerId,key:this.key,vue:this.values});
						uni.setStorageSync("customer_username",this.values);
						break;
					case 'Identity':
						await saveCustomerInfobykey({id:this.customerId,key:this.key,vue:this.values});
						uni.setStorageSync("customer_identity",this.values);
						break;
					case 'Gender':
						await saveCustomerInfobykey({id:this.customerId,key:this.key,vue:this.gender_value});
						uni.setStorageSync("customer_gender",this.gender_value);
						break;
					case 'Phone':
						await checkValidateCode({phone:this.values,code:this.code});
						await saveCustomerInfobykey({id:this.customerId,key:this.key,vue:this.values});
						uni.setStorageSync("customer_phone",this.values);
						break;
					case 'BirthDay':
						await saveCustomerInfobykey({id:this.customerId,key:this.key,vue:this.birth_day});
						uni.setStorageSync("customer_birthday",this.birth_day);
						break;
				}
				if(uni.getStorageSync("customer_username") && uni.getStorageSync("customer_phone")  && uni.getStorageSync("customer_identity")){
					uni.setStorageSync("customer_improved",true);
				}
				uni.navigateBack({
					url:'../info/info'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.vc-item {
		display: flex;
		align-items: center;
		font-size: $main-text-size-28;
		color: $main-text-color-gray-33;
		height: 90rpx;
		background-color: #fff;
		border-bottom: 1px solid $main-page-color;
		

		&-title {
			margin-right: auto;
			margin-left: 20rpx;
		}

		&-content {
			margin-right: 20rpx;
			width: 500rpx;
			text-align: right;
		}


	}

	.done-btn {
		height: 80rpx;
		width: 600rpx;
		margin-left: 75rpx;
		background-color: $main-theme-color-green;
		color: #fff;
		font-size: 32rpx;
		position: absolute;
		bottom: 40rpx;
		border-radius: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.code-btn {
		background-color: #007AFF;
		color: #fff;
		font-size: 30rpx;
		margin-left: auto;
		margin-right: 20rpx;
		border-radius: 10rpx;
		height: 70rpx!important;
		line-height: 70rpx;
	}
</style>
